<template>
  <div class="flex7 flex"
       style="height: 100%">
    <img src="@/assets/img/fxyp/line_bg.png"
         alt=""
         style="width:2.8125rem;height: 98%;" />
    <div class="flex1 flexC positionR">
      <div class="title_div">
        <p class="font_s18 JustifyContentC AlignItemsC flex"
           style="height: 6.625rem;">
          <span :class="{cur:isActive===1}"
                class="tab_bg not_select"
                @click="selectFun(1)">数量图</span>
          <span :class="{cur:isActive===2}"
                class="tab_bg not_select"
                @click="selectFun(2)">比例图</span>
        </p>
      </div>
      <div class="flex1 flexC"
           v-if="isActive === 1">
        <div class="flex flex1"
             style="margin-bottom: 1rem">
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[0]}}</p>
            <line-echart-view :height=heightStyle
                              :arrX=yearList
                              :arrY=YList
                              :arrY2=Y2List2
                              :arrY3=Y2List3
                              :arrY4=Y2List4
                              :indexType=tdType
                              :legendData=legendList
                              :dw2=dw
                              :colors=colorList4 />
          </div>
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[1]}}</p>
            <line-echart-view :height=heightStyle
                              :arrX=yearList
                              :arrY=YList2
                              :arrY2=Y3List2
                              :arrY3=Y3List3
                              :indexType=tdType
                              :arrY4=Y3List4
                              :legendData=legendList
                              :dw2=dw
                              :colors=colorList4 />
          </div>
        </div>
        <div class="flex flex1"
             style="margin-bottom: 0">
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[2]}}</p>
            <line-echart-view :height=heightStyle
                              :arrX=yearList
                              :arrY=YList3
                              :arrY2=Y4List2
                              :arrY3=Y4List3
                              :arrY4=Y4List4
                              :indexType=tdType
                              :dw2=dw
                              :legendData=legendList
                              :colors=colorList4 />
          </div>
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[3]}}</p>
            <line-echart-view :height=heightStyle
                              :arrX=yearList
                              :arrY=YList4
                              :arrY2=Y5List2
                              :arrY3=Y5List3
                              :arrY4=Y5List4
                              :indexType=tdType
                              :dw2=dw
                              :legendData=legendList
                              :colors=colorList4 />
          </div>
        </div>
      </div>
      <div class="flex1 flexC"
           v-if="isActive === 2 && (tabIndex === 0 | tabIndex === 2)">
        <div class="flex flex1"
             style="margin-bottom: 1rem">
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[1]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList5
                               :colors=colorList4 />
          </div>
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[2]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList6
                               :colors=colorList4 />
          </div>
        </div>
        <div class="flex flex1"
             style="margin-bottom: 0">
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[3]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList7
                               :colors=colorList4 />
          </div>
          <div class="flex1"></div>
        </div>
      </div>
      <div class="flex1 flexC"
           v-if="isActive === 2 && tabIndex === 1">
        <div class="flex flex1"
             style="margin-bottom: 1rem">
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[0]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList5
                               :arrY2=Y6List2
                               :arrY3=Y6List3
                               :arrY4=Y6List4
                               :indexType=tdType
                               :legendData=legendList
                               :colors=colorList4 />
          </div>
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[1]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList6
                               :arrY2=Y7List2
                               :arrY3=Y7List3
                               :arrY4=Y7List4
                               :indexType=tdType
                               :legendData=legendList
                               :colors=colorList4 />
          </div>
        </div>
        <div class="flex flex1"
             style="margin-bottom: 0">
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[2]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList7
                               :arrY2=Y8List2
                               :arrY3=Y8List3
                               :arrY4=Y8List4
                               :indexType=tdType
                               :legendData=legendList
                               :colors=colorList4 />
          </div>
          <div class="flex1 pic_box positionR">
            <p class="font_s20 title">{{titleList[3]}}</p>
            <line-echart-view2 :height=heightStyle
                               :arrX=yearList
                               :arrY=YList8
                               :arrY2=Y9List2
                               :arrY3=Y9List3
                               :arrY4=Y9List4
                               :indexType=tdType
                               :legendData=legendList
                               :colors=colorList4 />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineEchartView from "./echarts/LineEchartView"
import LineEchartView2 from "./echarts/LineEchartView2"
import { queryOrgAreaVo, queryOrgGraveVo, queryOrgPractitionerVo } from '@/api/dataSea'
import Bus from '../../../assets/bus.js'
export default {
  name: "FxypRight",
  components: { LineEchartView2, LineEchartView },
  data () {
    return {
      isActive: 1,
      titleList: [],
      titleList1: ['占地面积', '批复面积', '已用面积', '剩余可造墓面积'],
      titleList2: ['已建造数', '已销售数', '已落葬数（已放骨灰数）', '未销售数（空余格位数）'],
      titleList3: ['从业总人数', '35岁以下人数', '本科以上人数', '有墓地管理员资质人数'],
      legendList: [],
      heightStyle: '99%',
      colorList: ['#2595EA'],
      colorList2: ['#C5AD64'],
      colorList3: ['#71FAB3'],
      colorList4: ['#2595EA', '#07C8C5', '#1C7EF6', '#FF8823', '#3CD661'],
      YList: [],
      YList2: [],
      YList3: [],
      YList4: [],
      YList5: [],
      YList6: [],
      YList7: [],
      YList8: [],
      Y2List2: [],
      Y2List3: [],
      Y2List4: [],
      Y3List2: [],
      Y3List3: [],
      Y3List4: [],
      Y4List2: [],
      Y4List3: [],
      Y4List4: [],
      Y5List2: [],
      Y5List3: [],
      Y5List4: [],
      Y6List2: [],
      Y6List3: [],
      Y6List4: [],
      Y7List2: [],
      Y7List3: [],
      Y7List4: [],
      Y8List2: [],
      Y8List3: [],
      Y8List4: [],
      Y9List2: [],
      Y9List3: [],
      Y9List4: [],
      yearList: [],
      orgAreaList: [], // 占地面积
      approvedAreaList: [], //批复面积
      usedAreaList: [], //已使用面积
      canBuiltAreaList: [], //剩余可造墓土地面积
      approvedAreaRateList: [], // 批复面积与占地面积之比
      usedAreaRateList: [], // 使用面积与占地面积之比
      canBuiltAreaRateList: [], // 剩余面积占地面积之比

      buildedInhumationList: [], //已建传统墓穴
      soldGraveInhumationList: [], //已销售传统墓穴
      buriedGraveInhumationList: [], //已下葬传统墓穴
      nosoldInhumationList: [], //未销售传统墓穴
      buildedInhumationRateList: [], //已建传统墓穴占比
      soldGraveInhumationRateList: [], //已销售传统墓穴占比
      buriedGraveInhumationRateList: [], //已下葬传统墓穴占比
      nosoldInhumationRateList: [], //未销售传统墓穴占比

      practitionerList: [], //从业人员数
      practitionerBkysList: [], //本科以上人数
      practitionerQualifiedList: [], //具有墓地管理员资质的人数
      practitioner35YearsOldList: [], //35岁以下人数
      practitionerBkysRateList: [], //本科以上人数占比
      practitionerQualifiedRateList: [], //具有墓地管理员资质的人数占比
      practitioner35YearsOldRateList: [], //35岁以下人数占比
      tabIndex: 0,
      tdType: 0,
      dw: '亩',
      orgId: ''
    }
  },
  created () {
    this.titleList = this.titleList1
  },
  mounted () {
    this.queryOrgAreaVo(this.orgId)
    Bus.$on('gm_name', (val) => {
      this.orgId = val.orgId
      this.yearList = []
      this.YList = []
      this.YList2 = []
      this.YList3 = []
      this.YList4 = []
      this.YList5 = []
      this.YList6 = []
      this.YList7 = []
      this.YList8 = []
      if (this.tdType === 0) {
        this.queryOrgAreaVo(this.orgId)
      } else if (this.tdType === 1) {
        this.queryOrgGraveVo(this.orgId)
      } else if (this.tdType === 2) {
        this.queryOrgPractitionerVo(this.orgId)
      }
    })
    Bus.$on('tabIndex', (val) => {
      this.tabIndex = val
      this.yearList = []
      this.YList = []
      this.YList2 = []
      this.YList3 = []
      this.YList4 = []
      this.YList5 = []
      this.YList6 = []
      this.YList7 = []
      this.YList8 = []
      if (val === 0) {
        this.tdType = 0
        this.dw = '亩'
        this.titleList = this.titleList1
        this.legendList = []
        this.clearList()
        this.queryOrgAreaVo(this.orgId)
      } else if (val === 1) {
        this.tdType = 1
        this.dw = ''
        this.titleList = this.titleList2
        this.legendList = ['传统墓穴', '壁葬、室内葬', '植树葬', '寄存格位']
        this.queryOrgGraveVo(this.orgId)
      } else if (val === 2) {
        this.tdType = 0
        this.dw = '人'
        this.clearList()
        this.legendList = []
        this.titleList = this.titleList3
        this.queryOrgPractitionerVo(this.orgId)
      }
    })
  },
  methods: {
    clearList () {
      this.YList = [],
        this.YList2 = [],
        this.YList3 = [],
        this.YList4 = [],
        this.YList5 = [],
        this.YList6 = [],
        this.YList7 = [],
        this.YList8 = [],
        this.Y2List2 = [],
        this.Y2List3 = [],
        this.Y2List4 = [],
        this.Y3List2 = [],
        this.Y3List3 = [],
        this.Y3List4 = [],
        this.Y4List2 = [],
        this.Y4List3 = [],
        this.Y4List4 = [],
        this.Y5List2 = [],
        this.Y5List3 = [],
        this.Y5List4 = [],
        this.Y6List2 = [],
        this.Y6List3 = [],
        this.Y6List4 = [],
        this.Y7List2 = [],
        this.Y7List3 = [],
        this.Y7List4 = [],
        this.Y8List2 = [],
        this.Y8List3 = [],
        this.Y8List4 = [],
        this.Y9List2 = [],
        this.Y9List3 = [],
        this.Y9List4 = [],
        this.yearList = []

    },
    selectFun (index) {
      this.isActive = index
    },
    queryOrgAreaVo (orgId) {
      queryOrgAreaVo({
        orgId: orgId
      }).then((response) => {
        if (response.data.response) {
          let orgAreaList = [] // 占地面积
          let approvedAreaList = [] //批复面积
          let usedAreaList = [] //已使用面积
          let canBuiltAreaList = [] //剩余可造墓土地面积
          let approvedAreaRateList = [] // 批复面积与占地面积之比
          let usedAreaRateList = [] // 使用面积与占地面积之比
          let canBuiltAreaRateList = [] // 剩余面积占地面积之比
          if (response.data.response) {
            response.data.response.forEach(item => {
              this.yearList.push(parseInt(item.hisYear))
              orgAreaList.push(item.orgArea)
              approvedAreaList.push(item.approvedArea)
              usedAreaList.push(item.usedArea)
              canBuiltAreaList.push(item.canBuiltArea)
              approvedAreaRateList.push(item.approvedAreaRate)
              usedAreaRateList.push(item.usedAreaRate)
              canBuiltAreaRateList.push(item.canBuiltAreaRate)
            })
            this.YList = orgAreaList
            this.YList2 = approvedAreaList
            this.YList3 = usedAreaList
            this.YList4 = canBuiltAreaList
            this.YList5 = approvedAreaRateList
            this.YList6 = usedAreaRateList
            this.YList7 = canBuiltAreaRateList
          }
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    queryOrgGraveVo (orgId) {
      queryOrgGraveVo({
        orgId: orgId
      }).then((response) => {
        if (response.data.response) {
          if (response.data.response) {
            let data = response.data.response
            this.yearList = data.yearList
            this.YList = data.buildedInhumationList //已建传统墓穴列表
            this.Y2List2 = data.buildedWallandindoorList //已建壁葬、室内葬列表
            this.Y2List3 = data.buildedTreeList //已建植树葬列表
            this.Y2List4 = data.buildedDepositboxList //已建寄存格位列表
            this.YList5 = data.buildedInhumationRateList
            this.Y6List2 = data.buildedWallandindoorRateList
            this.Y6List3 = data.buildedTreeRateList
            this.Y6List4 = data.buildedDepositboxRateList

            this.YList2 = data.nosoldInhumationList //已建未销售传统墓穴列表
            this.Y3List2 = data.nosoldWallandindoorList //已建未销售壁葬、室内葬列表
            this.Y3List3 = data.nosoldTreeList //已建未销售植树葬列表
            this.Y3List4 = data.nosoldDepositboxList //已建未销售寄存格位列表
            this.YList6 = data.nosoldInhumationRateList
            this.Y7List2 = data.nosoldWallandindoorRateList
            this.Y7List3 = data.nosoldTreeRateList
            this.Y7List4 = data.nosoldDepositboxRateList

            this.YList3 = data.soldGraveInhumationList //已销售传统墓穴列表
            this.Y4List2 = data.soldGraveWallandindoorList //已销售壁葬、室内葬列表
            this.Y4List3 = data.soldGraveTreeList //已销售植树葬列表
            this.Y4List4 = data.soldGraveDepositboxList //已销售寄存格位列表
            this.YList7 = data.soldGraveInhumationRateList
            this.Y8List2 = data.soldGraveWallandindoorRateList
            this.Y8List3 = data.soldGraveTreeRateList
            this.Y8List4 = data.soldGraveDepositboxRateList

            this.YList4 = data.buriedGraveInhumationList //已下葬传统墓穴列表
            this.Y5List2 = data.buriedGraveWallandindoorList //已下葬壁葬、室内葬列表
            this.Y5List3 = data.buriedGraveTreeList // 已下葬植树葬列表
            this.Y5List4 = data.buriedGraveDepositboxList // 已下葬寄存格位列表
            this.YList8 = data.buriedGraveInhumationRateList
            this.Y9List2 = data.buriedGraveWallandindoorRateList
            this.Y9List3 = data.buriedGraveTreeRateList
            this.Y9List4 = data.buriedGraveDepositboxRateList
          }
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    queryOrgPractitionerVo (orgId) {
      queryOrgPractitionerVo({
        orgId: orgId
      }).then((response) => {
        if (response.data.response) {
          if (response.data.response) {
            let practitionerList = [] // //从业人员数
            let practitionerBkysList = [] //本科以上人数
            let practitionerQualifiedList = [] //具有墓地管理员资质的人数
            let practitioner35YearsOldList = [] //35岁以下人数
            let practitionerBkysRateList = [] //本科以上人数占比
            let practitionerQualifiedRateList = [] //具有墓地管理员资质的人数占比
            let practitioner35YearsOldRateList = [] //35岁以下人数占比
            response.data.response.forEach(item => {
              this.yearList.push(parseInt(item.hisYear))
              practitionerList.push(item.practitioner)
              practitionerBkysList.push(item.practitionerBkys)
              practitionerQualifiedList.push(item.practitionerQualified)
              practitioner35YearsOldList.push(item.practitioner35YearsOld)
              practitionerBkysRateList.push(item.practitionerBkysRate)
              practitionerQualifiedRateList.push(item.practitionerQualifiedRate)
              practitioner35YearsOldRateList.push(item.practitioner35YearsOldRate)
            })
            this.YList = practitionerList
            this.YList2 = practitioner35YearsOldList
            this.YList3 = practitionerBkysList
            this.YList4 = practitionerQualifiedList
            this.YList5 = practitioner35YearsOldRateList
            this.YList6 = practitionerBkysRateList
            this.YList7 = practitionerQualifiedRateList
          }
        }
      }).catch((response) => {
        console.log(response)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.title_div {
  height: 6.625rem;
  background: url("~@/assets/img/fxyp/1.png");
  background-size: 100% 100%;
}
.tab_bg {
  width: 13.5rem;
  margin-right: 1rem;
  display: inline-block;
  height: 4.0625rem;
  line-height: 4.0625rem;
  padding-top: 0.4rem;
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #cef9fc;
}
.not_select {
  background: url("~@/assets/img/fxyp/not_select_icon.png");
  background-size: 100% 100%;
}
.cur {
  background: url("~@/assets/img/fxyp/select_icon.png");
  background-size: 100% 100%;
}

.pic_box {
  margin-right: 1rem;
  background: url("~@/assets/img/fxyp/pic_bg.png");
  background-size: 100% 100%;
  padding: 1.4rem 1rem;
  box-sizing: border-box;
}
.title {
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #72ffff;
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
}
</style>